<template>
  <div class="home">
    <div class="flex">
      <Card color="#3bc8a9" pirce="120" title="今日已售(元)" :img="a1" />
      <Card color="#679cf6" pirce="208" title="今日订票数" :img="a2" />
      <Card color="#ff8d41" pirce="328" title="今日支付订单数" :img="a3" />
      <Card color="#de799b" pirce="50" title="今日退票数" :img="a4" />
    </div>
    <!-- 柱状图加折线图 -->
    <div class="flex-echarts">
      <div>
        <div class="line">
          <h4>近一周售票量</h4>
          <Pillar />
        </div>

      </div>
        <!-- 横向柱状图 -->
      <div class="bar-box">
        <div class="bar">
         <div class="select">
          <h4>热门出发/到达城市排名</h4>
          <select @change="dian" name="" id="" class="option">
          <option value=0 >今日</option>
          <option value=1 >近一周</option>
          <option value=2 >近一月</option>
          </select>
     
         </div>
         <div class="btn">
           <button  :class="[aa ? '' : 'on']"  @click="clicks(false)">出发城市</button>
           <button  :class="[aa?'on':'']" @click="clicks(true)">到达城市</button>
         </div>
         <!--  -->
         <div class="bar-tab" v-if="aa">
          <Bar/>
         </div>
         <!--  -->
         <div  class="bar-tab" v-else>
            <Bar2/>
         </div>
        </div>
      </div>
    </div>
   
  <!-- 饼图 -->
  <div class="pies">
    <Pie/>
    <div class="wire"></div>
    <Pietwo/>
    <div class="wire"></div>
    <Piethree/>
  </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
//引入卡片
import Card from '../../components/Card.vue'
//引入柱状图
import Pillar from '../../components/Pillar.vue'
import Bar from '../../components/Bar.vue'
import Bar2 from '../../components/Bar2.vue'
import Pie from '../../components/Pie.vue'
import Pietwo from '../../components/Pietwo.vue'
import Piethree from '../../components/Piethree.vue'
import a1 from '../../img/今日已售(元).png'
import a2 from '../../img/今日订票数.png'
import a3 from '../../img/今日支付订单数.png'
import a4 from '../../img/今日退票数.png'
components: {
  Card,
    Pillar,
    Bar,
    Pie,
    Pietwo
}
let aa = ref(true)
const tabPosition = ref(0)

//点击切换eacharts图表
const clicks=(a)=>{
aa.value = a
}
//下拉框切换
const dian = (values)=>{
  console.log(values.target.value);
  const val = values.target.value
   if(val == 0) {
    aa.value = true
   }else if(val == 1){
    aa.value = false
   }else if(val == 2){
    aa.value = true
   }
}
</script>

<style scoped lang="scss">

.flex {
  display: flex;
  justify-content: space-around;
}

.flex-echarts {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;

  .line {
  width: 900px;
  height: 320px;
  background-color: #ffffff;
	box-shadow: 0px 0px 10px 0px 
		rgba(51, 51, 51, 0.1);
	 border-radius: 8px;
    padding: 8px;
    margin-left: 10px;
    h4{
      color:#1ba9ba
    }
  }
}
.bar-box{
  margin-right: 10px;
  width: 700px;
	height: 336px;
	background-color: #ffffff;
	box-shadow: 0px 0px 10px 0px 
		rgba(51, 51, 51, 0.1);
	border-radius: 8px;
  
}
.select{
  display: flex;
  margin: 10px;
  justify-content: space-around;
  h4{
    color:#1ba9ba;
  }
  .option{ 
	width: 76px;
	height: 26px;
	border-radius: 4px;
	border: solid 1px rgba(178, 183, 198, 0.54);
  
  option{
    border: none;
  }
  }
}
.btn{
  margin-left: 80px;
  position: relative;
  z-index: 9999;
  button.on{
    background: #1ba9ba;
    color: #fff;
  }
  button{
    width: 64px;
	height: 24px;
	background: rgba(178, 183, 198, 0.2);
	border-radius: 3px;
  border: none;
  }
}
.pies{
  width: 1640px;
  height: 210px;
  background: #fff;
  display: flex;
  margin: 8px;
  background-color: #ffffff;
	box-shadow: 0px 0px 10px 0px 
		rgba(51, 51, 51, 0.1);
	border-radius: 8px;
  justify-content: space-around;
}
.wire{
  width: 1px;
	height: 159px;
	border: solid 1px #d8d9de;
  margin-top: 37px;
}
.bar-tab{
  margin-top: -10px;
  width: 100%;
  height: 400px;
}
</style>